<template>
  <div class="mall-class page" ref="webview">
    <div class="mall-search bg_grey">
      <div class="van-icon van-icon-arrow-left" @click="$router.go(-1)"></div>
      <div class="search">
        <van-field v-model="textValue" class="input" readonly @click="goSearch" :clearable='true' placeholder="搜索商品/店铺">
          <template #left-icon>
            <i class="icon-search"></i>
          </template>
        </van-field>
      </div>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false">
          <div class="product-box">
            <div class="product-info">
              <div class="imgPath">
                <van-image :width="$tools.toPX(140)" :height="$tools.toPX(140)" fit="contain" class="img" lazy-load src="http://file.jmgxmt1010sc.com/2020/1/20200114113754457.jpg">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="24" />
                  </template>
                </van-image>
              </div>
              <div class="detail">
                <div class="name">Vero Moda官方旗舰店</div>
                <div class="flex-end">
                  <div class="funs">粉丝人数11万</div>
                  <div class="collection-btn">收藏商品</div>
                  <!-- <div class="collection-btn active">已收藏</div> -->
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'mallStore',
  data () {
    return {
      textValue: '',
      sortType: '', // 排序类型
      apiUrl: 'goodslist',
      sortActive: 1, // 当前选中排序字段
      getTitle: sessionStorage.getItem('title')
    };
  },
  mixins: [mixins],
  components: {
  },
  // 缓存了页面使用 created钩子
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList('goodslist', true);
    });
  },
  methods: {
    // 跳转搜索
    goSearch () {
      this.$router.push({ 'path': '/search' });
    },
    // 去详情
    goGoods (sn) {
      this.$router.push({ 'path': '/mall/goods', query: { sn: sn } });
    },
    // 去店铺
    goStore (id) {
      this.$router.push({ 'path': '/store', query: { id: id } });
    }
  },
  created () {
    this.params = {
      cid: this.$route.query.id
    };
  }
};
</script>
<style lang="less" scoped>
.mall-class {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .nav-bar-srot {
    display: flex;
    border-bottom: 1px solid rgba(238, 238, 238, 0.6); /*no*/
    .tab {
      flex: 1;
      display: block;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      color: #353535;
      .sort {
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 15px;
          position: absolute;
          top: 6px;
          right: -28px;
          height: 30px;
          background-image: url('/static/images/icon-sort.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
      .sort.asc {
        &::after {
          background-image: url('/static/images/icon-sort-asc.png');
          transform: rotate(180deg);
        }
      }
      .sort.desc {
        &::after {
          background-image: url('/static/images/icon-sort-asc.png');
        }
      }
    }
    .tab.active {
      color: #ff0034;
    }
    .tab.price {
    }
  }
  .content {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    overflow: auto;

    .rows {
      display: flex;
      padding: 20px 25px;
      // border-bottom: 1px solid #f4f4f4; /*no*/
      .row-img {
        width: 230px;
        height: 230px;
        margin-right: 36px;
        border-radius: 10px;
        img {
          width: 230px;
          height: 230px;
          object-fit: cover;
          border-radius: 10px;
        }
      }
      .info {
        flex: 1;
        .price {
          color: #ff0034;
          font-size: 36px;
          padding: 0 0 10px;
          font-weight: 800;
          .text {
            font-size: 24px;
            vertical-align: middle;
          }
        }
        .shop {
          color: #959595;
          font-size: 24px;
        }
        .name {
          font-size: 30px;
          padding: 15px 0 5px;
          color: #353535;
        }
        .attr {
          font-size: 24px;
          color: #959595;
          padding: 5px 0;
        }
        .coupon_sale_mark {
          color: #ff0034;
          font-size: 24px;
          border-radius: 8px;
          font-weight: 500;
          display: inline-block;
          border: 1px solid #ff0034; /*no*/
          padding: 4px 10px;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>
